<template>
	<view class="cost-detail">
		<popupCard title="交易明细" @close="$emit('close')">
			<scroll-view :scroll-y="true" class="cost-detail-scroll" >
				<view class="cost-detail-content">
					<view class="basic-cost">
						<view class="category">
							基本费用						
						</view>		
						<view class="cost--row" v-for="item in orderInfo.subOrders" :key="item.subOrderNo">
							<view class="name">{{item.skuName}}</view>
							<view class="cost">
								<basic-price :price="item.sellerAmount" size="26rpx" color="#333" />
								<text class="num"> X {{item.productNum}}</text>																					
							</view>	
						</view>			
					</view>	
					<view class="normal-cost">
						<view class="cost--row">
							<view class="category">
								商品总额				
							</view>
							<basic-price :price="orderInfo.orderAmount" size="26rpx" color="#333" />
						</view>	
						<view class="cost--row">
							<view class="category">
								优惠合计				
							</view>
							<basic-price :price="orderInfo.subCouponAmount" size="26rpx" color="#333" />
						</view>	
						<view class="cost--row">
							<view class="category">
								应付金额				
							</view>
							<basic-price :price="orderInfo.payableAmount" size="26rpx" color="#333" />
						</view>	
						<view class="cost--row">
							<view class="category">
								退款金额				
							</view>
							<basic-price :price="orderInfo.refundAmount" size="26rpx" color="#333" />
						</view>					
						<view class="cost--row">
							<view class="category">
								订单实付				
							</view>
							<basic-price :price="orderInfo.actualAmount - orderInfo.refundAmount" size="30rpx" color="#F24E5A" />
						</view>					
					</view>			
				</view>
			</scroll-view>
		</popupCard>
	</view>
</template>
<script>
import popupCard from '@/components/business/popup-card'
export default {
	name: 'cost-detail',
	components: {popupCard},
	props: {
		orderInfo : { type: Object, default:()=>{return null} }
	},
	methods: {
	}
}
</script>
<style lang="less">
.cost-detail{
	padding-bottom: 100rpx;
	background: #fff;
	.cost-detail-scroll{
		height: 490rpx;
		width: 100%;
	}
	.cost-detail-content{
		padding: 30rpx;
		.cost--row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #666666;
			height: 60rpx;
		}
		.category{
			color: #333333;
			font-size: 28rpx;
		}
		.basic-cost{
			padding: 0 0 20rpx;
			border-bottom: 1px solid #EAEAEA;
			.num{
				margin-left: 10rpx;
			}
		}			
		.normal-cost{
			padding: 20rpx 0;
		}
	}
}
</style>
